<!--
 * @Author: TANGB02 13233582+Ace-Tang@user.noreply.gitee.com
 * @Date: 2024-03-05 16:57:58
 * @LastEditors: TANGB02 13233582+Ace-Tang@user.noreply.gitee.com
 * @LastEditTime: 2024-03-06 02:13:37
 * @FilePath: \ycq\ycq1.0\src\pages\moreAnimals\moreAnimals.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="animals">
    <div class="head">
      <!-- 面包屑 -->
      <a-breadcrumb style="margin-top: 16px" separator=">">
        <a-breadcrumb-item
          v-for="(item, index) in $route.matched"
          :key="index"
          :to="{ path: item.path }"
          style="cursor: pointer"
        >
          {{ item.meta.title }}
        </a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="content">
      <!-- 动物信息 -->

      <div
        class="animalsDetails"
        v-for="(value, index) in adoptedCat"
        :key="index"
      >
        <img
          :src="`http://i79768a535.zicp.fun:23570/common/download?name=${value.animalImage}`"
          alt=""
          @click="() => handleApplication(value.animalNumbers)"
        />
        <div class="txt">
          <span>呢称:{{ value.animalName }}</span>
          <span>品种:{{ value.breed }}</span>
          <div class="age">年龄:{{ value.animalAge }}年</div>
        </div>
      </div>
      <div
        class="animalsDetails"
        v-for="(value, index) in adoptingCat"
        :key="index"
      >
        <img
          :src="`http://i79768a535.zicp.fun:23570/common/download?name=${value.animalImage}`"
          alt=""
        />
        <div class="txt">
          <span>呢称:{{ value.animalName }}</span>
          <span>品种:{{ value.breed }}</span>
          <div class="age">年龄:{{ value.animalAge }}年</div>
        </div>
      </div>
    </div>
  </div>
  <div class="pagination">
    <a-pagination
      v-model:current="current"
      v-model:pagaSize="pagaSize"
      @change="onChange"
      :total="total"
      :show-total="(total) => `共有 ${total} 条`"
      show-less-items
    />
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from "vue";
import { useRouter } from "vue-router";
import { download, getAdopted, getAdopting } from "@/service/api.js";
const current = ref(1);
const total = ref(0);
const pagaSize = ref(40);
const router = useRouter();
// 待领养的猫
const adoptingCat = ref([]);
// 已经领养的猫
const adoptedCat = ref([]);
console.log(router.currentRoute._value.query.more); //1待领养 2已领养
const load = async (name) => {
  const res = await download({ name });
};

// const adopting = async () => {
//   const res = await getAdopting({
//     pageNumber: current.value,
//     pageSize: pagaSize.value,
//   });
//   console.log(res);
//   if (res.code === 1) {
//     total.value = res.data.total;
//     current.value = res.data.current;
//     for (let i = 0; i < res.data.records.lentgh; i++) {
//       load(res.data.records[i].animalImage);
//     }
//     adoptingCat.value = res.data.records;
//     console.log(adoptingCat.value);

//     console.log("下载完成");
//   }
// };
const adopted = async () => {
  const result = await getAdopted({
    pageNumber: current.value,
    pageSize: pagaSize.value,
  });
  console.log(result);

  if (result.code === 1) {
    total.value = result.data.total;
    current.value = result.data.current;
    for (let i = 0; i < result.data.records.lentgh; i++) {
      load(result.data.records[i].animalImage);
    }
    adoptedCat.value = result.data.records;

    console.log("下载完成");
  }
};
adopted();
const handleApplication = (Num) => {
  router.push({ name: "addApplication", query: {animalNumbers:Num} });
};
// 分页器
const onChange = (pageObj) => {
  console.log(pageObj);
};
</script>
<style scoped>
.animals {
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-end;
  width: 1000px;
  .head {
    width: 100%;
    height: 40px;
    display: flex;
    flex-wrap: row nowrap;
  }
  .content {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    justify-content: space-between;
    /* height: 707px; */
    margin-top: 20px;
    .animalsDetails {
      display: flex;
      flex-flow: column nowrap;
      justify-content: space-between;
      width: 230px;
      height: 180px;
      margin-left: 5px;
      margin-top: 20px;
      img {
        height: 150px;
        width: 230px;
      }
      .txt {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        width: 230px;
      }
    }
  }
  .pagination {
    width: 100%;
    align-self: self-end;
  }
}
</style>
